<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html;charset=utf-8" %>
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>backend</title>
    <link rel="stylesheet"  href="${pageContext.request.contextPath}/css/bootstrap.css" />
    <link rel="stylesheet"  href="${pageContext.request.contextPath}/css/index.css" />
    <script src="${pageContext.request.contextPath}/js/jquery.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <script src="${pageContext.request.contextPath}/js/bootstrap-paginator.js"></script>
    <script src="${pageContext.request.contextPath}/js/userSetting.js"></script>
    <script src="${pageContext.request.contextPath}/layer/layer.js"></script>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/zshop.css"/>

    <script>
        //将修改用户id传入模态框中
        function transmitId(id) {
            $(".updateOne").attr("alterid",id);
            $("#name").val('');
            $("#phone").val('');
            $("#address").val('');
            $("#myModal").modal('show');

        }
        //将用户状态设为禁用
        function closeStatus(id){
            $.post(
                '${pageContext.request.contextPath}/backend/customer/changeStatus',
                {
                    'id':id,
                    'isValid':0
                },
                function (result) {
                    //判断禁用是否成功
                    if (result=="OK"){
                        search_cus($("#pageNum").attr("page"));
                    }
                }
            );
        }
        //启用状态
        function openStatus(id){
            $.post(
                '${pageContext.request.contextPath}/backend/customer/changeStatus',
                {
                    'id':id,
                    'isValid':1
                },
                function (result) {
                    //判断禁用是否成功
                    if (result=="OK"){
                        search_cus($("#pageNum").attr("page"));
                    }
                }
            );
        }


        //查询数据并构建分页条
        function search_cus(page){
            $.post(
                '${pageContext.request.contextPath}/backend/customer/search',
                {   //参数列表
                    'pageNum':page,
                    'name':$("#customer_name").val(),
                    'loginName':$("#customer_loginName").val(),
                    'phone':$("#customer_phone").val(),
                    'address':$("#customer_address").val(),
                    'isValid':$("#customer_isValid").val()
                },
                function (result) {
                  if(result.success){
                      //构建分页条
                      set_pages(result.datas.pageInfo);
                  }
                }
            );
        }

        $(function () {
            search_cus(1);
        });


        //修改顾客信息
        function alterCustomer(){
            $.post(
                '${pageContext.request.contextPath}/backend/customer/alterCustomer',
                {
                    'id':$('.updateOne').attr("alterid"),
                    'name':$("#name").val(),
                    'phone':$("#phone").val(),
                    'address':$("#address").val()
                },
                function (result) {
                    //判断修改是否成功
                    if (result=="OK"){
                        alert("成功");
                    }else {
                        alert("失败");
                    }

                    search_cus($("#pageNum").attr("page"));
                }
            );
        }



        //设置分页
        function set_pages(pageInfo) {
            $('#pagination').bootstrapPaginator({
                bootstrapMajorVersion: 3,
                currentPage:pageInfo.pageNum,
                totalPages:pageInfo.pages,
                    onPageClicked:function (event,originalEvent,type,page) {
                        $("#pageNum").attr("page",page);
                        search_cus(page);
                    },
                itemTexts: function (type,page,current) {
                    switch (type) {
                        case "first":
                            return "首页";
                        case "prev":
                            return "上一页";
                        case "next":
                            return "下一页";
                        case "last":
                            return "末页";
                        case "page":
                            return page;
                    }

                }
            });

            build_message(pageInfo.list);
        }
        //构建员工列表
        function build_message(list) {
            var context = "";
            $.each(list,function (i,customer) {
                context+='<tr>';
                context+='<td>'+(i+1)+'</td>';
                context+='<td>'+customer.name+'</td>';
                context+='<td>'+customer.loginName+'</td>';
                context+='<td>'+customer.phone+'</td>';
                context+='<td>'+customer.address+'</td>';
                context+='<td id="status'+customer.id+'">';
                if(customer.isValid==1){
                    context+='有效';
                }else{
                    context+='无效';
                }

                context+='</td>';
                context+='<td class="text-center">';
                context+='<input type="button" class="btn btn-warning btn-sm doModify" value="修改" onclick="transmitId('+customer.id+')">';
                if(customer.isValid==1){
                    context+='<input type="button" class="btn btn-danger btn-sm doDisable" value="禁用" onclick="closeStatus('+customer.id+')">';
                }else{
                    context+='<input type="button" class="btn btn-success btn-sm doDisable" value="启用" onclick="openStatus('+customer.id+')">';
                }
                context+='</td>';
                context+='</tr>';
            });
            $("#tb").html(context);
        }

    </script>
</head>

<body>
    <div class="panel panel-default"  id="homeSet">
        <div class="panel-heading">
            <h3 class="panel-title">客户管理</h3>
        </div>
        <div class="panel-body">
            <div class="showusersearch">
                <form class="form-inline" method="post" id="pageNum">
                  <div class="form-group">
                    <label for="customer_name">姓名:</label>
                    <input type="text" class="form-control"id="customer_name" name="name" placeholder="请输入姓名" size="15px">
                  </div>
                  <div class="form-group">
                    <label for="customer_loginName">帐号:</label>
                    <input type="text" class="form-control" id="customer_loginName" name="loginName" placeholder="请输入帐号" size="15px">
                  </div>
                  <div class="form-group">
                    <label for="customer_phone">电话:</label>
                    <input type="text" class="form-control" id="customer_phone" name="phone" placeholder="请输入电话" size="15px">
                  </div>
                  <div class="form-group">
                    <label for="customer_address">地址:</label>
                    <input type="text" class="form-control" id="customer_address" name="address" placeholder="请输入地址">
                  </div>
                  <div class="form-group">
                    <label for="customer_isValid">状态:</label>
                        <select class="form-control" id="customer_isValid" name="isValid">
                            <option value="-1">全部</option>
                            <option value="1">---有效---</option>
                            <option value="0">---无效---</option>
                        </select>
                  </div>
                  <input type="button" value="查询" class="btn btn-primary" id="doSearch" onclick="search_cus(1)">
                </form>
            </div>
            
            <div class="show-list text-center" style="position: relative;top: 30px;">
                <table class="table table-bordered table-hover" style='text-align: center;'>
                    <thead>
                        <tr class="text-danger">
                            <th class="text-center">序号</th>
                            <th class="text-center">姓名</th>
                            <th class="text-center">帐号</th>
                            <th class="text-center">电话</th>
                            <th class="text-center">地址</th>
                            <th class="text-center">状态</th>
                            <th class="text-center">操作</th>
                        </tr>
                    </thead>

                    <tbody id="tb">


                    </tbody>
                </table>
                <ul id="pagination"></ul>
            </div>
        </div>
    </div>

    <!-- 修改客户信息 start -->
    <div class="modal fade" tabindex="-1" id="myModal">
        <!-- 窗口声明 -->
        <div class="modal-dialog">
            <!-- 内容声明 -->
            <div class="modal-content">
                <!-- 头部、主体、脚注 -->
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">修改客户</h4>
                </div>
                <div class="modal-body text-center">

                    <div class="row text-right">
                        <label for="name" class="col-sm-4 control-label">姓名：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="name">
                        </div>
                    </div>
                    <br>
                    <div class="row text-right">
                        <label for="phone" class="col-sm-4 control-label">电话：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="phone">
                        </div>
                    </div>
                    <br>
                    <div class="row text-right">
                        <label for="address" class="col-sm-4 control-label">地址：</label>
                        <div class="col-sm-4">
                            <input type="text" class="form-control" id="address">
                        </div>
                    </div>
                    <br>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary updateOne" onclick="alterCustomer()">修改</button>
                    <button class="btn btn-primary cancel" data-dismiss="modal">取消</button>
                </div>
            </div>
        </div>
    </div>
    <!-- 修改客户信息 end -->
</body>

</html>